import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import { staticUrl } from '@/utils'
import { connect } from 'react-redux'
import { getAdvisorService } from '@/api/user'
import './index.scss'
import dayjs from 'dayjs'

const phoneIcon = staticUrl('/img/user/adviser-icon-phone.png')
const emptyIcon = staticUrl('/img/user/adviser-icon-empty.png')
const locationIcon = staticUrl('/img/user/adviser-icon-location.png')
interface State {
  store: any,
  staff: any,
  order: any
}

@connect<any>(({ location, car }) => ({ storeInfo: location.storeLocation, car: car.carInfo.currentCar }))
class Adviser extends Component<any> {
  constructor (props) {
    super(props)
    this.state = {
      staff: [],
      order: {},
			store:{}
    }
  }
  state: State
  componentDidMount() {
    const storeCode = Taro.getStorageSync('STORECODE')
    const STORE_LOCATION = Taro.getStorageSync('STORE_LOCATION')
    if (!storeCode) {
      Taro.setStorageSync('REDIRECT_PATH', '/pages/adviser/index/index')
      Taro.showModal({
        title: '温馨提示',
        content: '请先选择门店',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            Taro.switchTab({
              url: '/pages/tabbar/store/index'
            })
          }
        }
      })
      return
    } else {
      this.setState({
        store: STORE_LOCATION
      })
    }
    getAdvisorService({
      storeCode
    }).then((res) => {
      let { store, service, repair, beauty } = res.data.data.staff
      let order = res.data.data.order || {}
      store.map((item) => {
        item.job = '店长'
      })
      service.map((item) => {
        item.job = '服务顾问'
      })
      repair.map((item) => {
        item.job = '机修主管'
      })
      beauty.map((item) => {
        item.job = '美容主管'
      })
      let staff = [...store, ...service, ...repair, ...beauty]
      this.setState({
        staff,
        order
      })
    })
  }

  UNSAFE_componentWillReceiveProps() {
  }
  private car: ICar | {} = {}

  goToOrderList() {
    Taro.navigateTo({
      url: '/pages/order/list/index?tabStatus=3'
    })
  }

  goToOrderDetails(orderNumber) {
    Taro.navigateTo({
      url: '/pages/order/details/index?orderNumber=' + orderNumber
    })
  }


  render() {
    const { store, staff, order } = this.state
		console.log('this',this)
    return (
      <View className='adviser'>
        {/* 门店信息 */}
        <View className='store-info'>
          <View className="store-info--left">
            <View className="store-info--name">{store.storeName}</View>
            <View className="store-info--address">{store.address}</View>
          </View>
          <View className="store-info--right">
            <View className="store-info--phone" onClick={() => Taro.makePhoneCall({ phoneNumber: store.phone })}><Image src={phoneIcon} className="store-phone--icon"></Image></View>
            <View className="store-info--location" onClick={() => {
              const { latitude, longitude, address, storeName } = store
              Taro.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                scale: 18,
                name: storeName,
                address
              })
            }}><Image src={locationIcon} className="store-location--icon"></Image> <Text className="disinstant">{store.distance}</Text></View>
          </View>
        </View>
        {/* 顾问列表 */}
        <View className="list">
          <View className="list-title">
            <Text className="list-main">专属顾问</Text>
            <Text className="list-sub">为您提供养车好建议</Text>
          </View>
          <View className="list-inner">
            {staff.length != 0 ? staff.map((item, index) => {
              return (
                <View className="list-item" key={index + item.name}>
                  <View className="list-info">
                    <Text className="list-info--x">{item.name.substring(0, 1)}</Text>
                    <Text className="list-info--name">{item.name}</Text>
                    <Text className="list-info--job">{item.job}</Text>
                  </View>
                  <View className="list-info--phone" onClick={() => Taro.makePhoneCall({ phoneNumber: item.mobile })}><Image src={phoneIcon} className="phone--icon"></Image></View>
                </View>)
            }) : null}
          </View>
        </View>

        {/* 最近完成的订单 */}
        <View className="order">
          <Text className="order-title">最近完成的订单</Text>
          <View className="order-more" onClick={this.goToOrderList}>
            <Text className="order-more--text">查看更多</Text>
            <Iconfont size='30' color='#CCCCCC' name='icon-jiantourukou' />
          </View>
        </View>

        <View className="service">
          {
            order.orderNumber
              ? (
                <View className="service-item" onClick={() => this.goToOrderDetails(order.orderNumber)}>
                  <View className="service-num">{order.orderNumber}</View>
                  {
                    <View className="service-imgbox">
                      <View className="img-wrap">
                        <View className="img-wrap--left">
                          {
                            order.type == 2 ? (
                              <View className="fad">{order.items.sku[0].goodsName}</View>
                            ) :
                              order.items.goods && order.items.goods.length != 0 ? order.items.goods.map(i => {
                                return (
                                  <View className="service-imgcon" key={i.id}>
                                    <Image src={i.goodsThumbnail} className="service-img" />
                                  </View>
                                )
                              }) : null
                          }
                        </View>
                        {
                          order.items.goods && order.items.goods.length > 0 ? (
                            <View className="service-more"><Iconfont size='30' color='#CCCCCC' name='icon-jiantourukou' /></View>
                          ) : null
                        }
                      </View>
                    </View>
                  }
                  <View className="service-info">
                    <Text>{dayjs.unix(order.finishOrderAt).format('YYYY-MM-DD HH:mm:ss')}</Text>
                    <Text>共{order.items.sku.length}件</Text>
                  </View>
                </View>
              )
              : (
                <View className="no-data">
                  <Image src={emptyIcon} className="no-data--image" />
                  <View className="no-data--text">暂无订单</View>
                </View>
              )
          }

        </View>

        <View className="fix-info">
          <Text>如果您对爱车养护或最近的服务有任何疑问</Text>
          <Text>致电门店专属服务顾问为您解答</Text>
        </View>

      </View>
    )
  }
}
export default Adviser
